import React from 'react'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Construction } from 'lucide-react'

const UnderDevelopmentAlert = () => {
  return (
    <div className="w-full max-w-2xl mx-auto p-4">
      {/* <Alert variant="default" className="border-yellow-500 bg-yellow-50">
        <Construction className="h-4 w-4 text-yellow-600" />
        <AlertTitle className="text-yellow-700 ml-2">🚧 功能开发中</AlertTitle>
        <AlertDescription className="text-yellow-600 mt-2">
          此功能正在积极开发中。我们正在努力为您带来更好的体验，敬请期待！
          <div className="mt-2 text-sm">预计完成时间: 2024年第二季度</div>
        </AlertDescription>
      </Alert> */}

      <div className="mt-6 p-6 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50">
        <div className="flex items-center justify-center h-32">
          <div className="text-center">
            <Construction className="h-12 w-12 text-gray-400 mx-auto mb-2" />
            <p className="text-gray-500">页面内容即将呈现</p>
            <AlertDescription className="text-yellow-600 mt-2">
              此功能正在积极开发中。我们正在努力为您带来更好的体验，敬请期待！
              {/* <div className="mt-2 text-sm">预计完成时间: 2024年第二季度</div> */}
            </AlertDescription>
          </div>
        </div>
      </div>
    </div>
  )
}

export default UnderDevelopmentAlert
